
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>兑换</title>
</head>
<body>
<div>
    <div class="dialog" style="display:none">
        <div class="content">
            <div class="horizontalFlex alignItemCenter spaceBetween" >
                <div class="closeBtn">
                </div>
                <div style="position: relative;top: -1rem;" class="alignItemCenter spaceCenter ">
                    <img src="./asset/title_bg.png" style="height: calc(80rem/28);width: calc(320rem/28);display: -webkit-flex">
                    <div class="alignItemCenter spaceCenter" style="display: -webkit-flex;position: absolute; top: 0;bottom: 0;left: 0;right: 0;margin: auto">
                        兑换
                    </div>
                </div>

                <div onclick="nones()" style="position: relative;top: -1rem;" >
                    <img class="closeBtn" src="./asset/close.png">

                </div>

            </div>
            <div class="horizontalFlex spaceBetween" style="position: relative;top:-1rem">
                <div>
                    <img src="./asset/arrow_left.png" style="height: calc(48rem/28);width:calc(58rem/28);">
                </div>
                <div class="btn_selected">
                    200-299
                </div>
                <div class="btn_normal">
                    300-399
                </div><div class="btn_normal">
                    300-399
                </div><div class="btn_normal">
                    300-399
                </div><div class="btn_normal">
                    300-399
                </div><div class="btn_normal">
                    300-399
                </div>
                <div>
                    <img src="./asset/arrow_left.png" style="height: calc(48rem/28);width:calc(58rem/28);">
                </div>
            </div>
            <div>

            </div>
        </div>


    </div>
    <div onclick="shows()">展开</div>
</div>
<script type="text/javascript" src="../../js/jquery.js" ></script>
<script>
    // 用720位基准开发的
    var baseWith = 720;
    var baseFontSize = 28;
    (function (doc, win) {
        var docEl = doc.documentElement;
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            var clientHeight = docEl.clientHeight;
            if (!clientWidth||!clientHeight) return;
            // 判断是横屏还是竖屏
            var max = (clientWidth<clientHeight)?clientWidth:clientHeight
            docEl.style.fontSize = baseFontSize * (max / baseWith) + 'px';
        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    }(document,window));
    //显示遮罩弹窗
    function shows(){
        $(".dialog").css("display","block");
    }
    //隐藏遮罩弹窗
    function nones(){
        $(".dialog").css("display","none");
    }
</script>
</body>

</html>
